<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Viewport metatags -->
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- iOS webapp metatags -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- iOS webapp icons -->
<link rel="apple-touch-icon" href="touch-icon-iphone.html" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.html" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-retina.html" />

<!-- CSS Reset -->
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<!--  Fluid Grid System -->
<link rel="stylesheet" type="text/css" href="css/fluid.css" media="screen" />
<!-- Theme Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/dandelion.theme.css" media="screen" />
<!--  Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/dandelion.css" media="screen" />
<!-- Demo Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/demo.css" media="screen" />

<!-- jQuery JavaScript File -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<!-- jQuery-UI JavaScript Files -->
<script type="text/javascript" src="jui/js/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="jui/js/jquery.ui.timepicker.min.js"></script>
<script type="text/javascript" src="jui/js/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css" href="jui/css/jquery.ui.all.css" media="screen" />

<!-- Plugin Files -->

<!-- FileInput Plugin -->
<script type="text/javascript" src="js/jquery.fileinput.js"></script>
<!-- Placeholder Plugin -->
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<!-- Mousewheel Plugin -->
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<!-- Scrollbar Plugin -->
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<!-- Tooltips Plugin -->
<script type="text/javascript" src="plugins/tipsy/jquery.tipsy-min.js"></script>
<link rel="stylesheet" href="plugins/tipsy/tipsy.css" />

<!-- Validation Plugin -->
<script type="text/javascript" src="plugins/validate/jquery.validate.min.js"></script>

<!-- Chosen Plugin -->
<script type="text/javascript" src="plugins/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="plugins/chosen/chosen.css" media="screen" />

<!-- Demo JavaScript Files -->
<script type="text/javascript" src="js/demo/demo.validation.js"></script>

<!-- Core JavaScript Files -->
<script type="text/javascript" src="js/core/dandelion.core.js"></script>

<!-- Customizer JavaScript File (remove if not needed) -->
<script type="text/javascript" src="js/core/dandelion.customizer.js"></script>

<title>Dandelion Admin - Form Validation</title>

</head>

<body>

	<!-- Dandelion Customizer (remove if not needed) -->
    <div id="da-customizer">
    	<div id="da-customizer-content">
        	<ul>
            	<li>
                	<span class="da-customizer-title">Background Pattern</span>
                    <span id="da-customizer-body-bg"></span>
                </li>
                <li>
                	<span>Header Pattern</span>
                    <span id="da-customizer-header-bg"></span>
                </li>
                <li>
                	<span>
                    	Layout
                        <span title="This functionality can only provide you the CSS for background and header patterns. Instructions to switch between fixed or fluid layout can be found in the documentation." class="da-tooltip-w da-customizer-tooltip">
                    		[?]
                        </span>
                    </span>
                    <ul id="da-customizer-layouts" class="clearfix">
                    	<li>
                        	<input type="radio" id="da-customizer-fluid" name="da-layout" checked="checked" />
                        	<label for="da-customizer-fluid">Fluid</label>
                        </li>
                    	<li>
                        	<input type="radio" id="da-customizer-fixed" name="da-layout" />
                            <label for="da-customizer-fixed">Fixed</label>
                        </li>
                    </ul>
                </li>
            </ul>
            <div id="da-customizer-button">
            	<button class="da-button red">Get CSS</button>
            </div>
        </div>
        <span id="da-customizer-pulldown"></span>
    </div>
    
	<!-- Main Wrapper. Set this to 'fixed' for fixed layout and 'fluid' for fluid layout' -->
	<div id="da-wrapper" class="fluid">
    
        <!-- Header -->
        <div id="da-header">
        
        	<div id="da-header-top">
                
                <!-- Container -->
                <div class="da-container clearfix">
                    
                    <!-- Logo Container. All images put here will be vertically centere -->
                    <div id="da-logo-wrap">
                        <div id="da-logo">
                            <div id="da-logo-img">
                                <a href="dashboard.html">
                                    <img src="images/logo.png" alt="Dandelion Admin" />
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Header Toolbar Menu -->
                    <!-- Header Toolbar Menu -->
                    <div id="da-header-toolbar" class="clearfix">
                        <div id="da-user-profile">
                            <div id="da-user-avatar">
                                <img src="images/pp.jpg" alt="" />
                            </div>
                            <div id="da-user-info">
                                John Doe
                                <span class="da-user-title">Creative Director</span>
                            </div>
                            <ul class="da-header-dropdown">
                                <li class="da-dropdown-caret">
                                    <span class="caret-outer"></span>
                                    <span class="caret-inner"></span>
                                </li>
                                <li class="da-dropdown-divider"></li>
                                <li><a href="dashboard.html">Dashboard</a></li>
                                <li class="da-dropdown-divider"></li>
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Change Password</a></li>
                            </ul>
                        </div>
                        <div id="da-header-button-container">
                        	<ul>
                            	<li class="da-header-button notif">
                                	<span class="da-button-count">32</span>
                                	<a href="#">Notifications</a>
                                    <ul class="da-header-dropdown">
                                        <li class="da-dropdown-caret">
                                            <span class="caret-outer"></span>
                                            <span class="caret-inner"></span>
                                        </li>
                                        <li>
                                        	<span class="da-dropdown-sub-title">Notifications</span>
                                        	<ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer">
                                            	View all notifications
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            	<li class="da-header-button message">
                                	<span class="da-button-count">5</span>
                                	<a href="#">Messages</a>
                                    <ul class="da-header-dropdown">
                                        <li class="da-dropdown-caret">
                                            <span class="caret-outer"></span>
                                            <span class="caret-inner"></span>
                                        </li>
                                        <li>
                                        	<span class="da-dropdown-sub-title">Messages</span>
                                        	<ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer">
                                            	View all messages
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            	<li class="da-header-button logout">
                                	<a href="index.html">Logout</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                                    
                </div>
            </div>
            
            <div id="da-header-bottom">
                <!-- Container -->
                <div class="da-container clearfix">
                
                	<div id="da-search">
                    	<form>
                        	<input type="text" placeholder="Search..." />
                        </form>
                    </div>
                	
                    <!-- Breadcrumbs -->
                    <div id="da-breadcrumb">
                        <ul>
                            <li><a href="dashboard.html"><img src="images/icons/black/16/home.png" alt="Home" />Dashboard</a></li>
                            <li><a href="#">Form</a></li>
                            <li class="active"><span>Validation</span></li>
                        </ul>
                    </div>
                    
                </div>
            </div>
        </div>
    
        <!-- Content -->
        <div id="da-content">
            
            <!-- Container -->
            <div class="da-container clearfix">
            
                <!-- Sidebar -->
                <div id="da-sidebar-separator"></div>
                <div id="da-sidebar">
                
                    <!-- Main Navigation -->
                    <div id="da-main-nav" class="da-button-container">
                        <ul>
                            <li>
                            	<a href="dashboard.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/home.png" alt="Dashboard" />
                                    </span>
                                	Dashboard
                                </a>
                            </li>
                            <li>
                            	<a href="#">
                                	<!-- Nav Notification -->
                                    <span class="da-nav-count">32</span>
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/graph.png" alt="Charts" />
                                    </span>
                                	Statistics and Charts
                                </a>
                                <ul class="closed">
                                	<li><a href="statistic.html">Statistic Widgets</a></li>
                                	<li><a href="charts.html">Chart Gallery</a></li>
                                </ul>
                            </li>
                            <li>
                            	<a href="calendar.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/day_calendar.png" alt="Calendar" />
                                    </span>
                                	Calendar
                                </a>
                            </li>
                            <li>
                            	<a href="file.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/file_cabinet.png" alt="File Handling" />
                                    </span>
                                	File Handling
                                </a>
                            </li>
                            <li>
                            	<a href="table.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/table_1.png" alt="Table" />
                                    </span>
                                	Table
                                </a>
                            </li>
                            <li class="active">
                            	<a href="#">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/create_write.png" alt="Form" />
                                    </span>
                                	Form
                                </a>
                                <ul>
                                	<li><a href="form-layouts.html">Layouts</a></li>
                                	<li><a href="form-elements.html">Elements</a></li>
                                	<li><a href="form-validation.html">Validation</a></li>
                                </ul>
                            </li>
                            <li>
                            	<a href="ui.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/settings.png" alt="" />
                                    </span>
                                    UI Elements
                                </a>
                            </li>
                            <li>
                            	<a href="widgets.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/cog_4.png" alt="Widgets" />
                                    </span>
                                    Widgets
                                </a>
                            </li>
                            <li>
                            	<a href="#">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/word_documents_1.png" alt="Layout and Typography" />
                                    </span>
                                    Layout and Typography
                                </a>
                                <ul class="closed">
                                	<li><a href="grids.html">Grids and Panels</a></li>
                                	<li><a href="typography.html">Typography</a></li>
                                </ul>
                            </li>
                            <li>
                            	<a href="gallery.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/images_2.png" alt="Gallery" />
                                    </span>
                                    Gallery
                                </a>
                            </li>
                            <li>
                            	<a href="error.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/alert.png" alt="Error Pages" />
                                    </span>
                                    Error Page (404)
                                </a>
                            </li>
                            <li>
                            	<a href="icons.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/pacman.png" alt="Icons" />
                                    </span>
                                    Icons
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                </div>
                
                <!-- Main Content Wrapper -->
                <div id="da-content-wrap" class="clearfix">
                
                	<!-- Content Area -->
                	<div id="da-content-area">
                    
                    	<div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/accept.png" alt="" />
                                        Validation Example 1
                                    </span>
                                </div>
                                <div class="da-panel-content">
                                	<form id="da-ex-validate1" class="da-form">
                                    	<div id="da-ex-val1-error" class="da-message error" style="display:none;"></div>
                                        <div class="da-form-inline">
                                            <div class="da-form-row">
                                                <label>Required<span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="req1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Email<span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="email1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>URL<span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="url1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Password <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input id="pass1" type="text" name="pass1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Confirm Password <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="cpass1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Round Number<span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="digits1" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="da-button-row">
                                        	<input type="submit" value="Validate Me" class="da-button red" />
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                    	<div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/accept.png" alt="" />
                                        Validation Example 2
                                    </span>
                                </div>
                                <div class="da-panel-content">
                                	<form id="da-ex-validate2" class="da-form">
                                    	<div id="da-ex-val2-error" class="da-message error" style="display:none;"></div>
                                        <div class="da-form-inline">
                                            <div class="da-form-row">
                                                <label>Field [min length 5] <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="minl1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Field [max length 5] <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="maxl1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Field [length 5-10] <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="rangel1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Number [min 5] <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="min1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Number [max 5] <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="max1" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Number [5-10] <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="range1" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="da-button-row">
                                        	<input type="submit" value="Validate Me" class="da-button blue" />
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <div class="clear"></div>
                        
                    	<div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/accept.png" alt="" />
                                        Validation Example 3
                                    </span>
                                </div>
                                <div class="da-panel-content">
                                	<form id="da-ex-validate3" class="da-form">
                                        <div class="da-form-inline">
                                            <div class="da-form-row">
                                                <label>Radio Button <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<ul class="da-form-list">
                                                    	<li><input type="radio" name="gender" /> <label>Male</label></li>
                                                    	<li><input type="radio" name="gender" /> <label>Female</label></li>
                                                    </ul>
                                                    <label for="gender" class="error" generated="true" style="display:none;"></label>
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Checkbox <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<ul class="da-form-list">
                                                    	<li><input type="checkbox" name="sport" /> <label>Soccer</label></li>
                                                    	<li><input type="checkbox" name="sport" /> <label>Badminton</label></li>
                                                    	<li><input type="checkbox" name="sport" /> <label>Tennis</label></li>
                                                    </ul>
                                                    <label for="sport" class="error" generated="true" style="display:none;"></label>
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>File <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<input type="file" name="file1" class="da-custom-file" />
                                                    <label for="file1" class="error" generated="true" style="display:none;"></label>
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Dropdown <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<select name="dd1">
                                                    	<option></option>
                                                    	<option value="1">Option 1</option>
                                                    	<option value="2">Option 2</option>
                                                    	<option value="3">Option 3</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Dropdown with Chosen <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <select id="da-ex-val-chzn" name="chosen1">
                                                        <option></option>
                                                        <option value="1">Option 1</option>
                                                        <option value="2">Option 2</option>
                                                        <option value="3">Option 3</option>
                                                    </select>
                                                    <label for="da-ex-val-chzn" generated="true" class="error" style="display:none;"></label>
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Spinner</label>
                                                <div class="da-form-item large">
                                                	<input id="da-ex-val-spin" type="text" name="spin1" value="3" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="da-button-row">
                                        	<input type="submit" value="Validate Me" class="da-button green" />
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                    	<div class="grid_2">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="images/icons/color/text_signature.png" alt="" />
                                        Simple Registration Form
                                    </span>
                                </div>
                                <div class="da-panel-content">
                                	<form id="da-ex-validate4" class="da-form" style="padding-top:23px;">
                                        <fieldset class="da-form-inline">
                                        	<legend>Account Info</legend>
                                            <div class="da-form-row">
                                                <label>Email <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<input type="text" name="email" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Password</label>
                                                <div class="da-form-item large">
                                                    <input id="pass2" type="text" name="pass2" />
                                                </div>
                                            </div>
                                            <div class="da-form-row">
                                                <label>Confirm Password <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                    <input type="text" name="cpass2" />
                                                </div>
                                            </div>
                                        </fieldset>
                                        <fieldset class="da-form-inline">
                                        	<legend>Delivery Options</legend>
                                            <div class="da-form-row">
                                                <label>Souvenir Delivery Address</label>
                                                <div class="da-form-item large">
                                                	<textarea name="address"></textarea>
                                                	<ul class="da-form-list inline clearfix">
                                                    	<li><input type="checkbox" id="souvenirs" name="souvenirs" />
                                                        <label>Yes, send me the souvenirs</label></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="da-button-row">
                                        	<input type="reset" value="Reset" class="da-button gray left" />
                                        	<input type="submit" value="Register" class="da-button pink" />
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
        <!-- Footer -->
        <div id="da-footer">
        	<div class="da-container clearfix">
            	<p>Copyright 2012. Dandelion Admin. All Rights Reserved.
            </div>
        </div>
        
    </div>
    
</body>

</html>
